<template>
  <div class="app-container">
    <wise-crud ref="wiseCrud" :urls="urls" :fields="fields" :handle="handle">
      <template v-slot:handle="slotProps">
        <el-button type="info" size="small" class="activeBtn" round @click.native.prevent="viewHandle(slotProps.row)">查看
        </el-button>
        <template v-if="slotProps.row.approvalStatus === 0">
          <el-button
            type="primary"
            size="small"
            class="activeBtn"
            round
            @click.native.prevent="approvalHandle(slotProps.row, 1)"
          >
            通过
          </el-button>
          <el-button
            type="danger"
            size="small"
            class="activeBtn"
            round
            @click.native.prevent="approvalHandle(slotProps.row, 2)"
          >
            不合格
          </el-button>
        </template>
      </template>
    </wise-crud>

    <el-dialog
      title="查看"
      :visible.sync="viewDialog"
      :close-on-click-modal="false"
      close-on-press-escape
      destroy-on-close
      width="40%"
    >
      <el-form ref="ruleForm" label-width="140px" label-suffix="：">
        <div class="title">检测：</div>
        <el-form-item label="标题">
          {{ detectionObj.title }}
        </el-form-item>
        <el-form-item label="描述">
          {{ detectionObj.content }}
        </el-form-item>
        <el-form-item label="确认人员">
          {{ detectionObj.confirmUserInfo ? detectionObj.confirmUserInfo.username : "" }}
        </el-form-item>
        <el-form-item v-if="detectionObj.image" label="图片" prop="image">
          <el-image
            v-for="(img, i) in detectionObj.image.split(';')"
            v-if="img!= ''"
            :key="i"
            class="image"
            fit="cover"
            alt="点击查看大图"
            :src="img| imgPath"
            :preview-src-list="getSrcList(detectionObj.image)"
          />
          </p>
        </el-form-item>
        <el-divider />
        <div class="title">防腐：</div>
        <el-form-item label="标题">
          {{ embalmingObj.title }}
        </el-form-item>
        <el-form-item label="描述">
          {{ embalmingObj.content }}
        </el-form-item>
        <el-form-item label="确认人员">
          {{ embalmingObj.confirmUserInfo ? embalmingObj.confirmUserInfo.username : "" }}
        </el-form-item>
        <el-form-item v-if="embalmingObj.image" label="图片" prop="image">
          <el-image
            v-for="(img, i) in embalmingObj.image.split(';')"
            v-if="img!= ''"
            :key="i"
            class="image"
            fit="cover"
            alt="点击查看大图"
            :src="embalmingObj.image| imgPath"
            :preview-src-list="getSrcList(embalmingObj.image)"
          />

        </el-form-item>
        <el-divider />
        <div class="title">回填：</div>
        <el-form-item label="标题">
          {{ backfillObj.title }}
        </el-form-item>
        <el-form-item label="描述">
          {{ backfillObj.content }}
        </el-form-item>
        <el-form-item label="确认人员">
          {{ backfillObj.confirmUserInfo ? backfillObj.confirmUserInfo.username : "" }}
        </el-form-item>
        <el-form-item v-if="backfillObj.image" label="图片" prop="image">
          <el-image
            v-for="(img, i) in backfillObj.image.split(';')"
            v-if="img!= ''"
            :key="i"
            class="image"
            fit="cover"
            alt="点击查看大图"
            :src="backfillObj.image | imgPath"
            :preview-src-list="getSrcList(backfillObj.image)"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewDialog = false">取 消</el-button>
        <el-button type="primary" @click="viewDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import WiseCrud from '../../../../components/Crud/wiseCrud'
import {
  postHandle
} from '../../../../api'
import {
  imgPath,
  dateFormat
} from '@/filters'
import checkPermission from '../../utils/permission' // 权限判断函数
export default {
  name: 'UserManage',
  components: {
    WiseCrud
  },
  data() {
    return {
      urls: {
        list: '/api/v1/welder-sbtx-second/detection-approval-comb/list',
        show: '/api/v1/welder-sbtx-second/detection-comb/list',
        pass: '/api/v1/welder-sbtx-second/initiate-project-comb/approval-adopt/',
        rejected: `/api/v1/welder-sbtx-second/initiate-project-comb/approval-reject/`
      },
      fields: [{
        label: '序号',
        type: 'index',
        use: ['table']
      },
      {
        label: '名称',
        prop: 'name',
        type: 'text',
        use: ['search']
      },
      {
        label: '企业名称',
        prop: 'projectInfo.name',
        type: 'text',
        use: ['table']
      },
      {
        label: '项目名称',
        prop: 'projectInfo.name',
        type: 'text',
        use: ['table']
      },
      {
        label: '企业编号',
        prop: 'projectInfo.weldAllNumber',
        type: 'text',
        use: ['table']
      },

      {
        label: '项目地址',
        type: 'render',
        use: ['table'],
        tableRender: (h, row, index) => {
          return h('div', this.projectAddress(row.projectInfo))
        }
      },
      {
        label: '详细地址',
        prop: 'projectInfo.address',
        type: 'text',
        use: ['table']
      },
      {
        label: '项目开始时间',
        type: 'render',
        use: ['table'],
        tableRender: (h, row, index) => {
          return h('div', dateFormat(row.projectInfo.startTime, 'YYYY-MM-DD HH:mm:ss'))
        }
      },
      {
        label: '项目结束时间',
        type: 'render',
        use: ['table'],
        tableRender: (h, row, index) => {
          return h('div', dateFormat(row.projectInfo.endTime, 'YYYY-MM-DD HH:mm:ss'))
        }
      },
      {
        label: '动火等级',
        prop: 'projectInfo.hotLevel',
        type: 'text',
        use: ['table']
      },
      // {
      //   label: '状态',
      //   type: 'render',
      //   use: ['table'],
      //   tableRender: (h, row, index) => {
      //     return h('div', row.approvalStatus === 0 ? '待审核' : '已审核')
      //   }
      // },
      {
        label: '操作',
        type: 'handle',
        use: ['table'],
        handle: [],
        tableWidth: 220
      }
      ],

      viewData: [],
      viewDialog: false
    }
  },
  computed: {
    handle() {
      if (checkPermission(['superSysOpsAdmin'])) {
        return ['search']
      } else {
        return []
      }
    },
    detectionObj() {
      let obj = {}
      if (this.viewData && this.viewData.length > 0) {
        obj = this.viewData.find(item => item.type === 1)
      }
      return obj
    },
    embalmingObj() {
      let obj = {}
      if (this.viewData && this.viewData.length > 0) {
        obj = this.viewData.find(item => item.type === 2)
      }
      return obj
    },
    backfillObj() {
      let obj = {}
      if (this.viewData && this.viewData.length > 0) {
        obj = this.viewData.find(item => item.type === 3)
      }
      return obj
    }
  },
  methods: {
    // 省市区
    projectAddress({
      provinceName,
      cityName,
      countryName
    }) {
      if (provinceName && cityName && countryName) {
        return provinceName + cityName + countryName
      } else if (provinceName && cityName) {
        return provinceName + cityName
      } else if (provinceName) {
        return provinceName
      } else {
        return
      }
    },
    // 查看
    viewHandle(dataId) {
      this.getObjectId(dataId)
      this.viewDialog = true
    },
    // 详情
    getObjectId(d) {
      let params = {
        d: {
          filters: [{
            field: 'spaceId',
            operator: 'EQUALS',
            value: d.spaceId
          },
          {
            field: 'type',
            operator: 'IN',
            values: [1, 2, 3]
          },
          {
            field: 'qualifiedStatus',
            operator: 'EQUALS',
            value: 2
          }
          ]
        }
      }
      postHandle(this.urls.show, params).then(res => {
        this.viewData = res.result
      })
    },
    // 查看大图
    getSrcList(str) {
      if (str.lastIndexOf(';') != -1) {
        str = str.substring(0, str.length - 1)
      }
      let arr = []
      if (str) {
        arr = str.split(';')
      }
      return arr.map(item => imgPath(item))
    },
    // 项目验收--确认
    approvalHandle({
      id
    }, approvalStatus) {
      this.$confirm('此操作将会改变状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postHandle(`/api/v1/welder-sbtx-second/detection-approval-comb/approval/${id}`, {
          obj: {
            approvalStatus
          }
        }).then(res => {
          this.$message.success('成功')
          this.$refs['wiseCrud'].handleSearch(0)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .image {
    width: 150px;
    height: 150px;
    margin-right: 10px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0 10px 20px;
  }
</style>
